<template>
  <el-container class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">蔬菜展示系统</div>
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="vegetables">蔬菜信息</el-menu-item>
        <el-menu-item index="consult">咨询页面</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 主要内容区 -->
    <el-main class="main-content">
      <!-- 轮播图 -->
      <el-carousel height="400px" class="carousel">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <img :src="item.image" alt="{{ item.title }}" class="carousel-img">
        </el-carousel-item>
      </el-carousel>

      <!-- 蔬菜信息展示 -->
      <div class="vegetable-section">
        <h2 class="section-title">新鲜蔬菜</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="vegetable in vegetables" :key="vegetable.id" class="vegetable-card">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="vegetable.image" class="card-img" alt="{{ vegetable.name }}">
              <div class="card-content">
                <h3>{{ vegetable.name }}</h3>
                <p class="price">{{ vegetable.price }} 元/斤</p>
                <p class="origin">产地: {{ vegetable.origin }}</p>
                <el-button type="primary" size="small" class="detail-btn">查看详情</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 咨询入口 -->
      <div class="consult-section">
        <el-card class="consult-card">
          <h2 class="section-title">有疑问？联系我们</h2>
          <el-button type="success" size="large" @click="goToConsult">
            <el-icon><question-filled /></el-icon> 前往咨询
          </el-button>
        </el-card>
      </div>
    </el-main>

    <!-- 页脚 -->
    <el-footer class="footer">
      <p>蔬菜展示系统 </p>
    </el-footer>
  </el-container>
</template>

<script setup>
import { reactive } from 'vue';
import { QuestionFilled } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 导航状态
const activeIndex = reactive('home');

// 轮播图数据
const carouselItems = reactive([
  { id: 1, title: '有机蔬菜', image: new URL('@/assets/imgs/轮播图素材1.jpg', import.meta.url).href },
  { id: 2, title: '新鲜采摘', image: new URL('@/assets/imgs/轮播图素材2.jpg', import.meta.url).href },
  { id: 3, title: '健康生活', image: new URL('@/assets/imgs/轮播图素材3.jpg', import.meta.url).href },
  { id: 4, title: '专业服务', image: new URL('@/assets/imgs/轮播图素材4.jpg', import.meta.url).href },
]);

// 蔬菜数据
const vegetables = reactive([
  { id: 1, name: '有机生菜', price: 5.99, origin: '本地农场', image: new URL('@/assets/imgs/素材1.png', import.meta.url).href },
  { id: 2, name: '胡萝卜', price: 3.50, origin: '山东', image: new URL('@/assets/imgs/素材2.png', import.meta.url).href },
  { id: 3, name: '西红柿', price: 4.99, origin: '新疆', image: new URL('@/assets/imgs/素材3.png', import.meta.url).href },
  { id: 4, name: '黄瓜', price: 3.99, origin: '本地农场', image: new URL('@/assets/imgs/素材4.png', import.meta.url).href }
]);

// 导航选择处理
const handleSelect = (key) => {
  if (key === 'consult') {
    goToConsult();
  }
};

// 前往咨询页面
const goToConsult = () => {
  router.push('/consult');
};
</script>

<style scoped lang="scss">
.home-container {
  height: 100vh;
}

.header {
  background-color: #409EFF;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .logo {
    font-size: 24px;
    font-weight: bold;
  }
}

.main-content {
  padding: 20px;
  background-color: #f5f5f5;
}

.carousel {
  margin-bottom: 30px;

  .carousel-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

.section-title {
  font-size: 22px;
  margin-bottom: 20px;
  color: #333;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.vegetable-section {
  margin-bottom: 40px;
}

.vegetable-card {
  margin-bottom: 20px;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 15px;

  h3 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .price {
    color: #F56C6C;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .origin {
    color: #606266;
    margin-bottom: 15px;
    font-size: 14px;
  }

  .detail-btn {
    width: 100%;
  }
}

.consult-section {
  text-align: center;
  padding: 20px 0;
}

.consult-card {
  padding: 40px;
  background-color: #f0f9ff;
}

.footer {
  text-align: center;
  background-color: #409EFF;
  color: white;
  padding: 10px 0;
}
</style>